﻿<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try { ace.settings.check('breadcrumbs', 'fixed') } catch (e) { }
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="/Admin/Home">首页</a>
            </li>
            <li>
                <a href="/Admin/AdminMenu/MenuList">菜单列表</a>
            </li>
            <li class="active">菜单列表</li>
        </ul><!-- .breadcrumb -->
        <!-- #nav-search -->
    </div>

    <div class="page-content">
        <div class="page-header">
            <h1>
                Nestable lists
                <small>
                    <i class="icon-double-angle-right"></i>
                    Drag &amp; drop hierarchical list
                </small>
            </h1>
        </div><!-- /.page-header -->

        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->

                <div class="row">
                    <div class="col-sm-6">
                        <div class="dd" id="nestable">
                            <ol class="dd-list">
                                <li class="dd-item" data-id="1">
                                    <div class="dd-handle">
                                        Item 1
                                        <i class="pull-right bigger-130 icon-warning-sign orange2"></i>
                                    </div>
                                </li>

                                <li class="dd-item" data-id="2">
                                    <div class="dd-handle">Item 2</div>

                                    <ol class="dd-list">
                                        <li class="dd-item" data-id="3">
                                            <div class="dd-handle">
                                                Item 3
                                                <a data-rel="tooltip" data-placement="left" title="Change Event Date" href="#" class="badge badge-primary radius-5 tooltip-info pull-right white no-hover-underline">
                                                    <i class="bigger-120 icon-calendar"></i>
                                                </a>
                                            </div>
                                        </li>

                                        <li class="dd-item" data-id="4">
                                            <div class="dd-handle">
                                                <span class="orange">Item 4</span>
                                                <span class="lighter grey">
                                                    &nbsp; with some description
                                                </span>
                                            </div>
                                        </li>

                                        <li class="dd-item" data-id="5">
                                            <div class="dd-handle">
                                                Item 5
                                                <div class="pull-right action-buttons">
                                                    <a class="blue" href="#">
                                                        <i class="icon-pencil bigger-130"></i>
                                                    </a>

                                                    <a class="red" href="#">
                                                        <i class="icon-trash bigger-130"></i>
                                                    </a>
                                                </div>
                                            </div>

                                            <ol class="dd-list">
                                                <li class="dd-item item-orange" data-id="6">
                                                    <div class="dd-handle"> Item 6 </div>
                                                </li>

                                                <li class="dd-item item-red" data-id="7">
                                                    <div class="dd-handle">Item 7</div>
                                                </li>

                                                <li class="dd-item item-blue2" data-id="8">
                                                    <div class="dd-handle">Item 8</div>
                                                </li>
                                            </ol>
                                        </li>

                                        <li class="dd-item" data-id="9">
                                            <div class="dd-handle btn-yellow no-hover">Item 9</div>
                                        </li>

                                        <li class="dd-item" data-id="10">
                                            <div class="dd-handle">Item 10</div>
                                        </li>
                                    </ol>
                                </li>

                                <li class="dd-item" data-id="11">
                                    <div class="dd-handle">
                                        Item 11
                                        <span class="sticker">
                                            <span class="label label-success arrowed-in">
                                                <i class="icon-ok bigger-110"></i>
                                            </span>
                                        </span>
                                    </div>
                                </li>

                                <li class="dd-item" data-id="12">
                                    <div class="dd-handle">Item 12</div>
                                </li>
                            </ol>
                        </div>
                    </div>

                    <div class="vspace-sm-16"></div>

                    <div class="col-sm-6">
                        <div class="dd dd-draghandle">
                            <ol class="dd-list">
                                <li class="dd-item dd2-item" data-id="13">
                                    <div class="dd-handle dd2-handle">
                                        <i class="normal-icon icon-comments blue bigger-130"></i>

                                        <i class="drag-icon icon-move bigger-125"></i>
                                    </div>
                                    <div class="dd2-content">Click on an icon to start dragging</div>
                                </li>

                                <li class="dd-item dd2-item" data-id="14">
                                    <div class="dd-handle dd2-handle">
                                        <i class="normal-icon icon-time pink bigger-130"></i>

                                        <i class="drag-icon icon-move bigger-125"></i>
                                    </div>
                                    <div class="dd2-content">Recent Posts</div>
                                </li>

                                <li class="dd-item dd2-item" data-id="15">
                                    <div class="dd-handle dd2-handle">
                                        <i class="normal-icon icon-signal orange bigger-130"></i>

                                        <i class="drag-icon icon-move bigger-125"></i>
                                    </div>
                                    <div class="dd2-content">Statistics</div>

                                    <ol class="dd-list">
                                        <li class="dd-item dd2-item" data-id="16">
                                            <div class="dd-handle dd2-handle">
                                                <i class="normal-icon icon-user red bigger-130"></i>

                                                <i class="drag-icon icon-move bigger-125"></i>
                                            </div>
                                            <div class="dd2-content">Active Users</div>
                                        </li>

                                        <li class="dd-item dd2-item dd-colored" data-id="17">
                                            <div class="dd-handle dd2-handle btn-info">
                                                <i class="normal-icon icon-edit bigger-130"></i>

                                                <i class="drag-icon icon-move bigger-125"></i>
                                            </div>
                                            <div class="dd2-content btn-info no-hover">Published Articles</div>
                                        </li>

                                        <li class="dd-item dd2-item" data-id="18">
                                            <div class="dd-handle dd2-handle">
                                                <i class="normal-icon icon-eye-open green bigger-130"></i>

                                                <i class="drag-icon icon-move bigger-125"></i>
                                            </div>
                                            <div class="dd2-content">Visitors</div>
                                        </li>
                                    </ol>
                                </li>

                                <li class="dd-item dd2-item" data-id="19">
                                    <div class="dd-handle dd2-handle">
                                        <i class="normal-icon icon-reorder blue bigger-130"></i>

                                        <i class="drag-icon icon-move bigger-125"></i>
                                    </div>
                                    <div class="dd2-content">Menu</div>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div><!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
</div>
@section script{
<script src="/Content/assets/js/jquery.nestable.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {

        $('.dd').nestable();

        $('.dd-handle a').on('mousedown', function (e) {
            e.stopPropagation();
        });

        $('[data-rel="tooltip"]').tooltip();

    });
</script>
}




